<template>
    <div class="page_type_admin">
        <div class="page_head">
            <h1>帖子类型修改管理</h1>
			<input type="text" v-model="keyword">
			<Button type="primary" id="search" @click="GetPageType(keyword)">查询</Button>
			<Button type="primary" id="search" @click="GetAllPageType()">查询所有</Button>
        </div>
        <Table :columns="columns1" :data="data1" slot="content">
            <template slot-scope="{ row, index }" slot="id">
                <Input disabled type="text" v-model="editTitle" v-if="editIndex === index" />
                <span v-else>{{ row.id }}</span>
            </template>
            <template slot-scope="{ row, index }" slot="createTime">
                <Input disabled type="text" v-model="editCreateTime" v-if="editIndex === index"  />
                <span v-else>{{ row.createTime }}</span>
            </template>
            <template slot-scope="{ row, index }" slot="name">
                <Select v-model="editType" style="width:200px" v-if="editIndex === index"  >
                    <Option  v-for="item in cityList" :value="item.value" >{{ item.label }}</Option>
                </Select>
                <span v-else>{{ row.name}}</span>
            </template>
            <template slot-scope="{ row, index }" slot="action">
                <div v-if="editIndex === index">
                    <Button @click="handleSave(row,index)">保存</Button>
                    <!-- <Button @click="DeletePageType(row,index)">删除</Button> -->
                    <Button @click="editIndex = -1">取消</Button>
                </div>
                <div v-else>
                    <Button @click="handleEdit(row, index)" >操作</Button>
                    <Button @click="value = true">查看详情</Button>
                    <Drawer :closable="false" width="940" v-model="value">
                        <div id="remarks">
                            <Table border ref="selection" :columns="columns2" :data="data2">
                                <template slot-scope="{ row, index }" slot="action">
                                </template>
                            </Table>
                        </div>
                    </Drawer>
                </div>
            </template>
        </Table>
    </div>
</template>

<script>
    import axios from 'axios'
    import qs from 'qs'
    import {mapActions, mapGetters} from 'vuex'

    export default {
        
        data () {
            return {
                keyword : '',
                value1: '1',
                value: false,
                pStyle: {
                    fontSize: '16px',
                    color: 'rgba(0,0,0,0.85)',
                    lineHeight: '24px',
                    display: 'block',
                    marginBottom: '16px'
                },
                columns1: [
                    {
                        title: '帖子类型ID',
                        slot: 'id'
                    },
                    {
                        title: '发布时间',
                        slot: 'createTime'
                    },
                    {
                        title:"帖子类型",
                        slot:"name"
                    },
                    {
                        title: '操作',
                        slot: 'action'
                    }
                ],
                data1: [
                    {
                        createTime: '',
                        id: '',
                        name:'',
                        updateTime:''
                    },
                ],
                c:{
                        createTime: '',
                        id: '',
                        name:'',
                        updateTime:''
                    },
                editIndex: -1,  // 当前聚焦的输入框的行数
                editTitle: '',  // 第一列输入框，当然聚焦的输入框的输入内容，与 data 分离避免重构的闪烁
                editCreateTime: '',  // 第二列输入框
                editViews: '',  // 第三列输入框
                editType:'',  // 第四列输入框
                editUser:'',  // 第五输入框

                columns2: [
                    {
                        title: '帖子类型Id',
                        width: 120,
                        key: 'id'
                    },
                    {
                        title: '帖子类型',
                        key: 'name'
                    },
                ],
                data2: [
                    {
                        id: '',
                        name: '',
                    },
                ],
                city:{
                    value:'',
                    label:''
                }
                ,
                cityList: [
                    {
                        value: '前端',
                        label: '前端'
                    },
                    {
                        value: '架构',
                        label: '架构'
                    },
                    {
                        value: '运维',
                        label: '运维'
                    },
                    {
                        value: '安全',
                        label: '安全'
                    },
                    {
                        value: '新闻',
                        label: '新闻'
                    },
                    {
                        value: '其他',
                        label: '其他'
                    }
                ],
            }
        },
        created () {
            // this.getTest() 
            this.GetAllPageType()  
         },
        methods: {
            ...mapActions('adminPageType', ["getPageType","getAllPageType", "updatePageType","deletePageType"]),
           
            getTest() {
              axios.get(`/admin/pagetype?page=1&size=10`).then(pageType => {
                console.log(pageType.data.pageTypes.records);
                // this.data1.unshift(pageType.data.pageTypes.records);
                console.log(this.data1)
                this.data1 = pageType.data.pageTypes.records,
                this.data2 = pageType.data.pageTypes.records,
                pageType.data.pageTypes.records.forEach(x => {
                    this.city.value = x.name,
                    this.city.label = x.name,
                    this.cityList.push(this.city),
                    this.city={}
                });
                })
            },
                        
            GetAllPageType (page = 1,size = 10,) {
                this.getAllPageType({
                    page,size,
                    callback: data => {
                        this.data1 = data.pageTypes.records,
                        this.data2 = data.pageTypes.records,
                        data.pageTypes.records.forEach(x => {
                        this.city.value = x.name,
                        this.city.label = x.name,
                        this.cityList.push(this.city),
                        this.city={},
                        this.pageTypes = data
                        });
                    }
                });
            },
            GetPageType(keyword) {

                if (keyword) {
					keyword = `%${keyword}%`;
                }
                let page = 1
                let size = 10
                 this.getAllPageType({
                   page,size, name:keyword,
                    callback: data => {
                        console.log(data)

                        this.data1 = data.pageTypes.records,
                        this.data2 = data.pageTypes.records,

                        data.pageTypes.records.forEach(x => {
                        this.city.value = x.name,
                        this.city.label = x.name,
                        this.cityList.push(this.city),
                        this.city={}
                        });
                    }
                });
            },
            handleEdit (row, index) {
                this.editTitle = row.id;
                this.editCreateTime = row.createTime;
                this.editType = row.name;
                this.editIndex = index;
            }
            ,
            handleSave (row,index) {
                this.data1[index].name = this.editType
                this.editIndex = -1;

                let cid = row.id;
                let updatename = this.editType
                this.updatePageType({
                    id: cid,
                    name: updatename,
					callback: success => {
                        console.log(success)
					}
				})
            },

            DeletePageType(row,index) {
                this.editIndex = -1;
                this.deletePageType({
                    id : row.id,
					callback: success => {
                        console.log(success)
                        this.GetAllPageType()
					}
                })
            },

            changePage (page) {
				this.GetAllPageType(page, this.pages.size)
			},
			changepageSize: function (size) {
			},
        }
      }
</script>

<style>
    .page_head{
        width: 20%;
    }
    .page_head h1{
        margin-bottom: 20px;
    }
    button{
        margin-left: 5px;
    }
    .ivu-table-wrapper{
        margin-top: 30px;
    }
    tr th:last-child .ivu-table-cell{
        margin-left: 20px;
    }
</style>